<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-17 16:49:15
 * @LastEditTime: 2019-09-25 17:04:13
 * @LastEditors: Please set LastEditors
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>添加接口</title>
  <link rel="stylesheet" href="css/base.css">
  <style>
    /* <!-- 头部导航栏开始 --> */
    .top {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #e5e5e5;
      font-size: 14px;
    }


    .top ul {
      overflow: hidden;
      /* width: 100%; */
    }

    .top li {
      float: left;
    }

    .top .t-r {
      float: right;
      border-left: 1px solid #e5e5e5;

    }

    .top .t-link {
      padding: 0 15px;
      border-right: 1px solid #e5e5e5;

    }

    .top .t-link a {
      color: #999;
    }

    .top .name {
      width: 155px;
      padding-left: 10px;
    }

    .top span {
      color: #999;
    }

    .top em {
      display: block;
      padding: 0 14px;
      font-style: normal;
    }

    .top em:hover {
      background-color: #4caf50;
    }

    .content {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
    }

    /* <!-- 左侧导航栏开始 --> */
    .left {
      width: 240px;
      height: 100%;
      border-right: 1px solid #e5e5e5;
    }

    .left li {
      padding: 15px 0;

    }

    .left li:first-child {
      background-color: #e3f1e5;

    }

    .left li:first-child a {
      color: #4caf50;
    }

    .left li:hover {
      background-color: #e3f1e5;
    }

    .left li span {
      display: inline-block;
      padding: 0 32px;
    }

    .left li a {
      width: 100%;
      display: block;
      font-size: 14px;
      color: black;
    }


    /* <!-- 右侧内容开始 --> */
    .right {
      flex: 1;
      padding: 10px;
      background-color: #f8f8f8;
    }

    /* 第一行按钮 */
    .box1 {
      margin: 5px 0;
      display: flex;
      justify-content: space-between;
    }

    button {
      background-color: #fff;
      border: 1px solid #dddddd;
      width: 90px;
      height: 30px;
      font-size: 12px;
      margin: 0;
      padding: 0;
      outline: none;

    }

    .btn-group-1 {
      font-size: 0;

    }

    .btn-group-1 button {
      border-right: none;
      border-left: none;
      border-radius: 3px;
    }

    .btn-group-1 button:first-child {
      margin: 0 10px 0 0;
      border-right: 1px solid #dddddd;
      border-left: 1px solid #dddddd;
    }

    .btn-group-1 button:nth-child(2) {
      border-left: 1px solid #dddddd;
      background-color: #4caf50;
      color: #fff;
      border-radius: 3px 0 0 3px;
    }

    .btn-group-1 button:nth-last-child(1) {
      border-right: 1px solid #dddddd;
      border-radius: 0 3px 3px 0;
    }

    /* 第一行结束 */
    /* 第二行开始 */
    .box2 {
      border: 1px solid #dddddd;
      padding: 0 10px;
    }

    .box2 em {
      font-style: normal;
      font-size: 12px;
      font-weight: 700;
      margin-right: 5px;
    }

    .box2 span {
      font-style: normal;
      font-size: 12px;
      font-weight: 700;
      display: inline-block;
      text-align: left;
      width: 5%;
    }

    .box2 dl dd {
      margin: 10px 0;
    }

    .box2 input,
    select {
      padding: 0;
      outline: none;
      border: 1px solid #ddd;
      height: 28px;
      border-radius: 3px;
    }

    .box2 input {
      width: 94%;
      box-sizing: border-box;
      padding-left: 10px;
    }

    .box2 dl dd {
      font-size: 0;
    }

    .box2 dl dd select {
      font-size: 12px;
      margin: 0 5px;
    }

    .box2 dl dd:first-child select {
      margin-left: 0;
    }

    /* 第三行开始 */
    .box3 {
      margin-top: 10px;
      font-size: 14px;
    }

    .box3 ul {
      overflow: hidden;
    }

    .box3 ul li {
      float: left;
    }

    .box3 table {
      width: 100%;
      background-color: #fff;
    }

    .box3 header {
      background-color: #fff;
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .box3 header button {
      margin-left: 5px;
    }

    .box3 table,
    .box3 td,
    .box3 th {
      border: 1px solid #ddd;
      border-collapse: collapse;
    }

    .box3 th {
      background-color: #fafafa;
    }

    .box3 table tr,
    .box3 header {
      height: 40px;
    }

    .box3 input[type='text'] {
      border: none;
      height: 40px;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      /* outline: none; */
    }

    .box3 td {
      text-align: center;
    }

    .box3 input[type='checkbox'] {
      width: 80%;
    }

    .item-head {
      position: relative;
      height: 31px;
    }

    .item-head ul {
      position: absolute;
     bottom: -1px;
    }
    
    .item-head ul button {
      border-radius: 3px;
    }

    .item-head li:nth-child(odd) button {
    background-color: #efefef;
    }

    .item-head li:nth-child(even) button {
      border-right: none;
      border-left: none;
      border-bottom: none;
    }

    /* //第四行开始 */
    .box4 {
      font-size:14px;
      margin-top:10px;
    }

    .box4 header span {
      margin-left:5px;
      font-weight: 700;
    }

    .box4 table {
      width: 100%;
      background-color: #fff;
    }

    .box4 header {
      background-color: #fff;
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .box4 header button {
      margin-left: 5px;
    }

    .box4 table,
    .box4 td,
    .box4 th {
      border: 1px solid #ddd;
      border-collapse: collapse;
    }

    .box4 th {
      background-color: #fafafa;
    }

    .box4 table tr,
    .box4 header {
      height: 40px;
    }

    .box4 input[type='text'] {
      border: none;
      height: 40px;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      outline: none;
    }

    .box4 td {
      text-align: center;
    }

    .box4 header:nth-child(1) span {
      margin-left:12px;
    }

    .box4 header:nth-child(2) span{
        border: 1px solid #bcdffb;
        padding:5px 7px;
        border-radius: 3px;
        background-color: #e3f7ff;
        color:#3692ed;
        font-weight: 500;
    }

    .box5 {
      margin-top:10px;
    }

    .box5 textarea {
      width: 100%;
      min-height: 120px;
      outline: none;
      border: 1px solid #ddd;
      padding:5px;
      resize: none;
      box-sizing: border-box;
    }

    .box5 .res-btn {
      position: relative;
      height: 30px;
    }

    .box5 .res-btn button {
      border-bottom: none;
      border-radius: 3px; 
      height: 30px;  
    }

    .box5 .res-btn button:nth-child(1){
      border-right: none;
    }

    .btn-wrap {
      display: inline-block;
      position: absolute;
    }

  </style>
</head>

<body>
  <!-- 头部导航栏开始 -->
  <div class="top">
    <ul>
      <li class="t-link"><a href="#">(●'◡'●)</a></li>
      <li class="name"><span>apiDoc开源版本</span></li>
      <li><span>API接口>电子社-工信书院>项目概况</span></li>
      <li class="t-r"><em>😉</em></li>
    </ul>
  </div>
  <!-- 头部导航栏结束 -->
  <div class="content">
    <!-- 左侧导航栏开始 -->
    <div class="left">
      <ul>
        <li><a href="#"><span>▢</span> 项目概况</a></li>
        <li><a href="#"><span>▢</span> API接口</a></li>
        <li><a href="#"><span>▢</span> 自动化测试</a></li>
        <li><a href="#"><span>▢</span> 接口错误日志</a></li>
        <li><a href="#"><span>▢</span> 状态码</a></li>
        <li><a href="#"><span>▢</span> 项目文档</a></li>
        <li><a href="#"><span>▢</span> 环境管理</a></li>
        <li><a href="#"><span>▢</span> 协作管理</a></li>
        <li><a href="#"><span>▢</span> 项目动态</a></li>
      </ul>
    </div>
    <!-- 左侧导航栏结束 -->
    <!-- 右侧内容开始 -->
    <div class="right">
      <div class="box1">
        <div class="btn-group-1">
          <button>《接口列表</button>
          <button>基础信息</button>
          <button>详细说明</button>
          <button>高级mock</button>
        </div>
        <div class="btn-group-2">
          <button>继续添加</button>
          <button>保存</button>
        </div>
      </div>
      <div class="box2">
        <dl>
          <dd><span>分组:</span>
            <select name="" id="">
              <option value="1">历史记录</option>
              <option value="2">订单</option>
              <option value="1">历史记录</option>
              <option value="2">订单</option>
              <option value="1">历史记录</option>
              <option value="2">订单</option>
            </select>
            <select name="" id="">
              <option value="1">可选（二级菜单）</option>
            </select>
            <em>状态:</em>
            <select name="" id="">
              <option value="1">启用</option>
              <option value="2">禁用</option>
            </select>
            <em>请求协议:</em>
            <select name="" id="">
              <option value="1">HTTP</option>
              <option value="2">HTTPS</option>
            </select>
            <em>请求方式:</em>
            <select name="" id="">
              <option value="1">POST</option>
              <option value="2">GET</option>
              <option value="1">POST</option>
              <option value="2">GET</option>
            </select>
            <em>返回情况:</em>
            <select name="" id="">
              <option value="1">无返回值（比如增删改查）</option>
              <option value="1">无返回值（比如增删改查）</option>
              <option value="1">无返回值（比如增删改查）</option>
              <option value="1">无返回值（比如增删改查）</option>
              <option value="1">无返回值（比如增删改查）</option>
            </select>
          </dd>
          <dd><span>URL:</span><input type="text"></dd>
          <dd><span>名称:</span><input type="text"></dd>
          <dd><span>根对象名:</span><input type="text"></dd>
          <dd><span>方法:</span><input type="text"></dd>
          <dd>
            <span>接口语言:</span>
            <select name="" id="">
              <option value="1">PHP</option>
              <option value="2">.NET</option>
            </select>
          </dd>
        </dl>
      </div>
      <div class="box3">
        <div class="item-head">
          <ul>
            <li><button>请求头部</button></li>
            <li><button>请求参数</button></li>
            <li><button>inject</button></li>
          </ul>
        </div>
        <table>
          <header>
            <button>导入头部</button>
          </header>
          <tr>
            <th>参数名</th>
            <th>说明</th>
            <th>必填</th>
            <th>类型</th>
            <th>示例</th>
            <th>操作</th>
          </tr>
          <tr>
            <td><input type="text" placeholder="参数名"></td>
            <td><input type="text" placeholder="参数名"></td>
            <td> <input type="checkbox" name="" id=""> </td>
            <td><input type="text" placeholder="参数名"></td>
            <td><input type="text" placeholder="参数示例"></td>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="box4">
        <header>
          <span>返回参数</span>
        </header>
        <header>
          <span>导入json</span>
        </header>
        <table>
      
          <tr>
            <th>参数名</th>
            <th>说明</th>
            <th>必填</th>
            <th>类型</th>
            <th>示例</th>
            <th>操作</th>
          </tr>
          <tr>
            <td><input type="text" placeholder="参数名"></td>
            <td><input type="text" placeholder="参数名"></td>
            <td> <input type="checkbox" name="" id=""> </td>
            <td><input type="text" placeholder="参数名"></td>
            <td><input type="text" placeholder="参数示例"></td>
            <td></td>
          </tr>
        </table>

      </div>
      <div class="box5">
        <div class="res-btn">
          <div class="btn-wrap">
          <button>成功</button><button>失败</button>
        </div>
        </div>
        <textarea name="" id=""></textarea>
      </div>
    </div>
    <!-- 右侧内容结束 -->
  </div>
</body>

</html>